/* layui界面框架 */
/* 引入弹出框 */
layui.config({
	  base: $config.resUrl+'other/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
  ajaxExtention:'js/ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
  $tool:'js/tool',
  $api:'js/api',
  dtree: 'layui_ext/dtree/dtree' //定义该组件模块名
}).use(['element','form','layer','laydate','table','dtree','ajaxExtention','$tool','$api'], function(){ //独立版的layer无需执行这一句
	var $ = layui.jquery,
	  element = layui.element,
	  dtree = layui.dtree,
	  form = layui.form,
	  layer = layui.layer,
	  table = layui.table,
	  $tool = layui.$tool,
	  $api = layui.$api;
  
  	//第一个实例
	tableIns = table.render({
	    elem: '#roleTable'
	    ,toolbar: '#toolbarDemo'
	    ,url: '/sys/role/page.json' //数据接口
	    //,where: {deptId: paramDeptId}
	  	,cols: [[ //表头
	  	       {type: 'checkbox', fixed: 'left'}
	 	      ,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
	 	      ,{field: 'name', title: '用户名'}
	 	      ,{field: 'type', title: '角色类型'}
	 	      ,{field: 'operator', title: '操作人', sort: true}
	 	      ,{field: 'operateTime', title: '操作时间',templet: function(res){return $tool.getMyDate(res.operateTime);}} 
	 	      ,{field: 'status', title: '状态', sort: true}
	 	      ,{field: 'remark', title: '描述', sort: true}
	 	      ,{field: 'operateIp', title: 'IP地址', sort: true}
	 	      ,{field: 'operate', title: '操作', width: 178, align:'center', toolbar: '#barDemo'}
	 	    ]]
	 	,response: {
			    statusName: 'code' //规定数据状态的字段名称，默认：code
			   ,statusCode: 0 //规定成功的状态码，默认：0
			   ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
			   ,countName: 'total' //规定数据总数的字段名称，默认：count
			   //,dataName: 'data' //规定数据列表的字段名称，默认：data
			 }
	  	,parseData: function(res){ //res 即为原始返回的数据
		    return {
		      "code": res.data.code, //解析接口状态
		      "msg": res.msg, //解析提示文本
		      "total": res.data.total, //解析数据长度
		      "data": res.data.data //解析数据列表
		    };
		  }
	  	,request: {
	  	    pageName: 'pageNo' //页码的参数名称，默认：page
	  	    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
	  	  }
	    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
	      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
	      //,curr: 5 //设定初始在第 5 页
	      ,groups: 3 //只显示 1 个连续页码
	      ,first: false //不显示首页
	      ,last: false //不显示尾页
	    }
	});
	
	//监听查询按钮
	form.on('submit(queryRole)', function (data) {
  	    //表格重新加载
        tableIns.reload({
            where: data.field
        });
	});
	
	//头工具栏事件
	table.on('toolbar(roleTableLay)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id),
	    data = checkStatus.data;
	    
	    switch(obj.event){
	      //重置按钮
	      case 'resetRole':
	    	  $("#myform").find('input[type=text],select').each(function() {
	  			$(this).val('');
	  		});
	      break;
	      //添加
	      case 'add':
	        openPage("/sys/role/edit.page","新增角色",{id:"no"});
	      break;
	      //批量删除
	      case 'delete':
	        layer.msg('选中了：'+ data.length + ' 个');
	      break;
	      //综合操作
	      case 'operation':
	    	  if(data.length == 0){
				  layer.msg('请选择一行');
	    	  } else if(data.length > 1){
				  layer.msg('只能同时编辑一个');
			  } else {
				  operation(data[0]);
			  }
	      break;
	    };
	});
	
	//监听表格操作列工具条
	table.on('tool(roleTableLay)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'detail'){
	    	openPage("/sys/role/edit.page","角色详情",data);
	    } else if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        $api.RoleDelete({id:data.id},function(result){
	        	layer.msg(result.msg,{time:500},function(){
	                //obj.del(); //删除对应行（tr）的DOM结构
	                //重新加载表格
	                tableIns.reload();
	            });
	        });
	        layer.close(index);
	      });
	    } else if(obj.event === 'edit'){
	    	openPage("/sys/role/edit.page","编辑角色",data);
	    }
	});
	
	//打开新增、编辑、查看弹出界面
	function openPage(content,title,data){
		layer.open({
			id:"role"+Math.random(),
			type: 2,
			title: title,
			shadeClose: true,
			shade: false,
			maxmin: true, //开启最大化最小化按钮
			shade: 0.8, //遮罩
			anim: 5,//动画方式
			area: ['893px', '450px'],
			content: content,
			success: function(layero, index){
				var body = layui.layer.getChildFrame('body', index);
				
				//如果是新增界面弹出，则传特殊标识
				if("no" == data.id){
					body.find("[name=id]").val(data.id);
					return;
				}
				
				//详情界面隐藏按钮
				if("角色详情" == title){
			    	body.find(":button").each(function(){
			    		$(this).hide();
					});
			    	body.find(":input").each(function(){
			    		$(this).addClass("layui-btn-disabled");
					});
				}
			
				body.find("[name=id]").val(data.id);
				body.find("[name=name]").val(data.name);
				body.find("[name=remark]").val(data.remark);
				body.find("[name=operator]").val(data.operator);
				body.find("[name=operateTime]").val($tool.getMyDate(data.operateTime));
				
				//状态下拉框动态赋值
				var status = 'dd[lay-value=' + data.status + ']';
				body.find("[name=status]").siblings("div.layui-form-select").find('dl').find(status).click();
				
				//状态下拉框动态赋值
				var type = 'dd[lay-value=' + data.type + ']';
				body.find("[name=type]").siblings("div.layui-form-select").find('dl').find(type).click();
				
				//重新渲染下拉框
				layui.form.render("select");
		    }
		});
	};
	
	//综合操作按钮
	function operation(data){
		layer.tab({
		  area: ['893px', '90%'],
		  tab: [{
		    title: '基本信息', 
		    content: '<object type="text/html" data="/sys/role/card.page?id='+data.id+'&openPage=/sys/role/roleCard" width="893px" height="450px"></object>'
		  }, {
		    title: '角色用户', 
		    content: '<object type="text/html" id="roleAndUser" data="/sys/role/card.page?id='+data.id+'&openPage=/sys/role/roleAndUser" width="893px" height="450px"></object>'
		  }, {
		    title: '角色菜单', 
		    content: '<object type="text/html" data="/sys/role/card.page?id='+data.id+'&openPage=/sys/role/roleAndMenu" width="893px" height="450px"></object>'
		  }]
		});  
	};
	
});